<template>
  <div class="order-item">
    <div>
        <img :src="item.unitPicture" alt="">
    </div>
    <div class="title">
        {{ item.unitName }}
    </div>
    <div class="pend" v-if="item.orderStatus === 1">
        <div class="time">
            {{ item.checkOutDate }} - {{ item.checkOutLatestTime }}  {{ item.summary }}
        </div>
        <van-button round  size="mini" class="delete">取消</van-button>
        <van-button round type="success" size="mini" >去支付</van-button>
    </div>

    <div class="finish" v-if="item.orderStatus === 5">
        <div class="text">{{ item.orderStatusDesc }} -- {{ item.cancelReasonDesc }}</div>
        <van-button round size="mini" class="delete">删除</van-button>
        <van-button round type="warning" size="mini" >重新下单</van-button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
    item: {
        type:Object,
        default:()=>({})
    }
})
</script>

<style lang="less" scoped>
.order-item {
    padding: 7px 20px;
    img {
        width: 100%;
    }
    .title {
        font-size: 14px;
        margin: 10px 0;
    }
    .pend {
        display: flex;
        justify-content:space-between;
        .time {
            font-size: 8px;
            color: red;
        }
    }
    .finish {
        display: flex;
        justify-content:space-between;
        .text {
            font-size: 8px;
            color: #333;
        }
    }

    ::v-deep(.van-button--mini){
        width: 60px;
        padding: 7px;
    }
}

.delete {
    background-color: #ccc;
    color: #555;
}
</style>